<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header" class="header"><span>考试信息</span></div>
      <el-form :model="form" label-width="160px">
        <el-form-item label="封面图片">
          <el-image :src="form['cover']" :preview-src-list="[form['cover']]" style="width: 188px; height: 100px;"/>
        </el-form-item>
        <el-form-item label="考试名称">
          {{ form['name'] }}
        </el-form-item>
        <el-form-item label="试卷名称">
          {{ form['test_paper_name'] }}
        </el-form-item>
        <el-form-item label="考试时间">
          {{ form['start_time']+'~'+form['end_time'] }}
        </el-form-item>
        <el-form-item label="合格分数">
          {{ form['qualified_score'] }}
        </el-form-item>
        <el-form-item label="考试时长">
          {{ form['limit_time'] }}分钟
        </el-form-item>
        <el-form-item label="可考次数">
          {{ form['number'] }}
        </el-form-item>
        <el-form-item label="考试对象">
          <el-tag v-for="item in form['group_name']" :key="item" type="warning" style="margin: 2px;">{{ item }}</el-tag>
        </el-form-item>
        <el-form-item label="排名显示">
          {{ form['is_ranking']===1?'是':'否' }}
        </el-form-item>
        <el-form-item label="是否打乱顺序">
          {{ form['is_sort']?'是':'否' }}
        </el-form-item>
        <el-form-item label="是否允许复制">
          {{ form['is_copy']?'不允许':'允许' }}
        </el-form-item>
        <el-form-item label="通知方式">
          {{ form['notice']===1?'短信':form['notice']===2?'微信': '短信&微信' }}
        </el-form-item>
        <el-form-item label="考试说明">
          <div v-html="form['explain']">{{ form['explain'] }}</div>
        </el-form-item>
        <el-form-item label="考试状态">
          {{ form['status_txt'] }}
        </el-form-item>
        <div style="text-align:center">
          <el-button v-if="queryMatch(190)" type="primary" class="bg-green" @click="toAnswerSheet">查看统计分析</el-button>
          <el-button type="info" @click="$router.back(-1)">返回</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      form: {
        cover: ''
      }
    }
  },
  watch: {},
  created() {
    this.id = this.$route.query.id;
    this.getData();
  },
  methods: {
    getData() {
      const url = 'exam/examInfo/' + this.id
      this.$store.dispatch('GetConnect', { url }).then(res => {
        Object.assign(this.form, res.data);
        this.form['group_name'] = this.form['group_name'].split('/');
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    toAnswerSheet() {
      this.$router.push({
        path: '/exam/answerSheet',
        query: { id: this.id }
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../../styles/index.scss';
.box-1 {
  max-width: 1000px;
  margin: 0 auto;
  > .header span {
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
  }
  .el-form {
    max-width: 900px;
    .title {
      font-weight: 600;
    }
    .remark {
      font-size: 13px;
      color: $textGray;
    }
    .el-button {
      width: 20%;
      min-width: 160px;
    }
  }
}
.el-checkbox {
  margin-right: 30px;
}
.el-checkbox + .el-checkbox {
  margin-left: 0;
  margin-right: 30px;
}
</style>
